<template>
<!-- 顶部登录 -->
<div class="profile">
  <!-- 未登录 -->
  <div v-if="!user" class="not_login">
    <div class="login_box">
      <img src="~@/assets/mobile.png" alt="">
      <span class="text" @click="$router.push('/login')"> 登录|注册</span>
    </div>
  </div>

<!-- 已登录区域 -->
  <div v-else class="al_login">
    <!-- 上侧盒子 -->
    <div class="base">
      <div class="head">
        <van-image
          class="avatar"
          round
          fit="cover"
          :src="userInfo.photo"/>
          <span class="name">{{userInfo.name}}</span>
      </div>
     <van-button round type="default" size="mini">编辑资料</van-button>
    </div>
    <!-- 数据展示盒子 -->
    <div class="data">
      <div class="data_item">
        <span>{{userInfo.art_count}}</span>
        <span>头条</span>
      </div>
       <div class="data_item">
        <span>{{userInfo.follow_count}}</span>
        <span>关注</span>
      </div>
       <div class="data_item">
        <span>{{userInfo.fans_count}}</span>
        <span>粉丝</span>
      </div>
       <div class="data_item">
        <span>{{userInfo.like_count}}</span>
        <span>获赞</span>
      </div>
    </div>
  </div>

<!-- 宫格导航 -->
  <van-grid class="nav-grid" :column-num="2">
    <van-grid-item>
      <i slot="icon" class="iconfont icon-shoucang"></i>
      <span slot="text" class="txt">收藏</span>
    </van-grid-item>
    <van-grid-item>
      <i slot="icon" class="iconfont icon-lishi"></i>
      <span slot="text" class="txt">历史</span>
    </van-grid-item>
  </van-grid>

  <!-- 消息通知，小智同学，退出 -->
 <div class="bottom_box">
   <van-cell title="消息通知" is-link />
   <van-cell title="小智同学" is-link />
   <van-cell v-if="user" @click="logout" class="logout_btn" title="退出登录" />
 </div>
</div>
</template>

<script>
import { mapState } from 'vuex'
import { getUserInfo } from '@/api/user.js'
export default {
  name: 'profile',
  data () {
    return {
      // 看要赋值的是什么类型，就定义什么
      userInfo: {}
    }
  },
  computed: {
    ...mapState(['user'])
  },

  created () {
    // 判断是否登录
    if (this.user) {
      // console.log('获取')
      this.loadUserInfo()
    }
    // created中不宜写太多逻辑
  },

  methods: {
    // 退出登录
    logout () {
      // this.$store.commit('changLogin')
      this.$dialog.confirm({
        title: '黑马头条',
        message: '确认退出？'
      })
        .then(() => {
          // 点击了确认
          this.$store.commit('changeUser', null)
        })
        .catch(() => {
          this.$toast('取消退出')
        })
    },
    // 加载用户数据
    async loadUserInfo () {
      try {
        const { data: res } = await getUserInfo()
        this.userInfo = res.data
      } catch (err) {
        console.dir(err)
        this.$toast.fail('获取数据失败')
      }
    }

  }
}
</script>

<style scoped lang='less'>
.profile {
  // 未登录区域
  .not_login {
    width: 750px;
    height: 401px;
    background-image: url(~@/assets/banner.png);
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    .login_box {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 132px;
        height: 132px;
        margin-bottom: 20px
      }
      .text {
        font-size: 28px;
        color: #fff;
    }

    }
  }
  // 已登录区域
  .al_login {
     width: 750px;
     height: 405px;
     background-image: url(~@/assets/banner.png);
     background-size: contain;
    // 个人基本信息
    .base {
      height: 240px;
      width: 750px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 60px 20px 0 20px;
      // 左侧父盒子
      .head {
        display: flex;
        align-items: center;
         .avatar {
        width: 132px;
        height: 132px;
      }
      .name {
        font-size: 29px;
        padding-left: 16px;
        color: #fff;
      }
      }
    }
    // 数据展示
    .data {
      width: 750px;
      height: 160px;
      display: flex;
      justify-content: space-around;
      margin-top: 40px;
      .data_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        span:nth-child(1) {
          font-size: 36px;
          margin-bottom: 10px;
        }
        span:nth-child(2) {
          font-size: 23px;
        }
      }
    }
  }
  // 宫格区域
  .nav-grid {
    margin-top: 10px;
    .iconfont {
      font-size: 45px;
      .icon-shoucang {
        color: #EB5253;
      }
      .icon-lishi {
        color: orange;
      }
    }
    .txt {
      margin-top: 10px;
      font-size: 28px;
      color: #000;
    }
  }
  // 消息通知
  .bottom_box {
    margin: 10px 0;
    .logout_btn {
      text-align: center;
      color: red;
      height: 100px;
    }
  }
}

</style>
